<template>
  <div>
    <el-dialog
      :title="formData.id ? '编辑发件人' : '新增发件人'"
      v-model="isAdd"
      width="500px"
      :before-close="cancelAdd"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formData"
        label-width="110px"
      >
        <div class="_smtp">
          <el-form-item label="SMTP服务器" prop="serverAddr">
            <el-input
              style="display: none"
              name="delTips"
              type="text"
              placeholder="发送邮件服务器地址"
              clearable
              v-model="formData.serverAddr"
            >
            </el-input>
            <el-input
              type="text"
              placeholder="发送邮件服务器地址"
              clearable
              v-model="formData.serverAddr"
            >
            </el-input>
          </el-form-item>
          <div class="_port">
            <el-form-item prop="port">
              <el-input
                type="text"
                clearable
                placeholder="SMTP端口"
                v-model="formData.port"
              >
              </el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="发件人邮箱" prop="senderMailAddr">
          <el-input
            type="text"
            placeholder="请输入邮件名称"
            clearable
            v-model="formData.senderMailAddr"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱密码" prop="password">
          <el-input
            type="text"
            @click="changeType"
            placeholder="请输入邮箱密码"
            show-password
            clearable
            v-model="formData.password"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="发件人昵称" prop="nickName">
          <el-input
            type="text"
            placeholder="请输入发件人昵称"
            clearable
            v-model="formData.nickName"
            maxlength="20"
            :show-word-limit="true"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="默认发件人" prop="isDefault">
          <el-switch
            v-model="formData.isDefault"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAdd">取 消</el-button>
          <el-button type="primary" @click="formValidate">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import reachPipelineApi from "@/api/reachPipelineApi";
export default {
  props: {
    isAdd: {
      require: false,
      type: Boolean,
      default: () => {
        return false;
      },
    },
    addData: {
      require: false,
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    isAdd(val) {
      this.formData = this.addData;
    },
  },
  data() {
    return {
      formData: {
        serverAddr: "", //	SMTP服务器地址
        port: "",
        nickName: "",
        senderMailAddr: "",
        password: "",
        isDefault: 0,
      },

      rules: {
        serverAddr: [
          {
            required: true,
            message: "请输入SMTP服务器地址",
            trigger: ["blur", "change"],
          },
        ],
        port: [
          {
            required: true,
            message: "请输入端口号",
            trigger: ["blur", "change"],
          },
        ],
        nickName: [
          {
            required: true,
            message: "请输入发件人昵称",
            trigger: ["blur", "change"],
          },
        ],
        senderMailAddr: [
          {
            required: true,
            message: "请输入发件人邮箱",
            trigger: ["blur", "change"],
          },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入邮箱密码",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    formValidate() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.saveOrUpdateEmailSender();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async saveOrUpdateEmailSender() {
      let rs = await reachPipelineApi.saveOrUpdateEmailSender(this.formData);
      if (rs.code == 200) {
        ElMessage.success(
          `${this.formData.id ? "编辑发件人成功" : "添加发件人成功"}`
        );
        this.confirmAdd();
      }
    },

    changeType(e) {
      console.log("[ e ] >", e);
      e.srcElement.type = "password";
    },

    cancelAdd() {
      this.$emit("cancelAdd");
      this.$refs.formData.resetFields();
    },
    confirmAdd() {
      this.$emit("confirmAdd");
      this.$refs.formData.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
._smtp {
  display: flex;
  .el-input {
    width: 220px;
  }
  ._port {
    // position: relative;
    :deep(.el-form-item__content) {
      margin-left: 20px !important;
      .el-input {
        width: 110px;
      }
    }
  }
}
</style>